* {
    box-sizing: border-box;
}

body{
    font-family: Arial, serif;
    margin: 0;
    padding:20px;
    background: linear-gradient(to bottom, red, blue);
}

.header{
    padding: 30px;
    background-color: white;
    text-align: center;
    width:100%;
}

.navibar_parent{
    width:100%;
    background-color: #2d2d30;
    overflow: auto;
}

.navibar_parent a{
    display: block;
    float:left;
    padding: 15px;
    color: white;
    cursor: pointer;
}

.navibar_parent a:hover{
    background-color: #4563b8;
}

.raw:after{
    clear:both;
    content: '';
    display: table;
}

.column{
    float: left;
}

.column.side{
    width:25%;
    padding-left: 20px;
}

.column.main{
    width:75%;
}

.card{
    background-color: white;
    margin-top: 20px;
    padding:20px;
}

.bigfakeimg{
    width:100%;
    height:300px;
    background-color: #fa7891;
}

.smallfakeimg{
    width:100%;
    height:100px;
    background-color: #fa472d;
}

/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
    .column.side, .column.middle{
        width: 100%;
    }
}